<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="text++">+</button>
        {{text}}

        <hr />
        <q-button :text="text" @transfer="lanzi">
            <template #but="{num}">
                内容{{num}}
            </template>
        </q-button>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref, computed } = Vue;
    const app = createApp({
        setup() {
            let text = ref(0)
            function lanzi(zhitiao) {
                text.value = zhitiao
            }
            return {
                text,
                lanzi
            }
        }
    })
    app.component('q-button', {
        props: {
            text: Number
        },
        setup(props, { emit }) {
            let options = computed(function () {
                return props
            })
            function add() {
                let text = options.value.text;
                emit('transfer', text + 1)
            }
            return {
                options,
                add
            }
        },
        template: `<div @click="add">{{text}}<slot name="but" num="666" /></div> `
    })

    app.mount('#app')
</script>

</html>